<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="所属区域">
            <el-select style="width:100%" v-model="params.agentId" filterable default-first-option placeholder="--区域--">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="wrap">
     <el-form :model="params" ref="ruleForm" label-width="130px" class="demo-ruleForm" size="small">
      <el-form-item label="小票标题" prop="smsTopName" :rules="[{required: true, message: '小票标题未填' }]">
        <el-input style="width: 400px;" v-model="params.smsTopName" placeholder="请输入小票标题" clearable />
      </el-form-item>
      <el-form-item style="margin-top: 40px">
        <el-button type="primary" @click="resetForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>
<script>
import { setPrintTicketName } from '@/api/agent.js'
export default {
  inject: ['upDataAgentArea'],
  data() {
    return {
      params: {
        agentId: '',
        smsTopName: '' //区域
      },
    }
  },
  computed: {
    restaurants() { // 区域数据
      return this.$store.state.agentListArea
    }
  },
  watch: {
    restaurants: {
      handler(val, oldVal) {
        if (!this.params.agentId) {
          this.params.agentId = val[0].id
        }
      },
      deep: true
    },
    'params.agentId': {
      handler(val, oldval) {
        if (this.restaurants && this.restaurants.length) {
          const index = this.restaurants.findIndex(i => i.id === this.params.agentId)
          this.params.smsTopName = this.restaurants[index].smstopname
        }
      }
    }
  },
  methods: {
    resetForm(formName) { // 新增修改分类
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          const params = { ...this.params }
          setPrintTicketName(params).then(res => {
            if (res.success) {
              this.upDataAgentArea()
              this.$message.success('保存成功！')
            }
          }).finally(() => { this.submitLoading = false })
        } else {
          return false
        }
      })
    }
  },
  mounted() {
    if (this.restaurants && this.restaurants.length) {
      this.params.agentId = this.restaurants[0].id
      this.params.smsTopName = this.restaurants[0].smstopname
    }
  }
}
</script>
<style lang="scss" scoped>
   .wrap-item{
    max-width: 1200px;
    margin: 0 auto;
    column-count: 2;
    column-gap: 10;
    }
</style>